<template>
  <div class="home">
    <h3>
      num:{{ num }}
      <button @click="num = !num">点击变化</button>
    </h3>
    <div class="test">
      <div>
        <h1>computed</h1>
        <p>{{ addComputed }}</p>
        <p>computed 当某一个数据（称它为依赖数据）发生变化的时候， 依赖它的数据才会重新执行执行计算方法</p>
      </div>
      <div>
        <h1>methods</h1>
        <p>{{ add() }}</p>
        <p>只要调用就会执行</p>
      </div>
      <div>
        <h1>wacth</h1>
        {{ num }}
        <p>当某一个数据（称它为依赖数据）发生变化的时候，会执行某个方法</p>
      </div>
      <div>
        <h1>filters</h1>
        <p>{{ num|addFilters }}</p>
        <p>过滤器,传给过滤器一个参数,返回你想要的数据</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    addFilters(val) {
      return val;
    },
  },
  data() {
    return {
      num: false,
    };
  },
  computed: {
    addComputed() {
      return this.num;
    },
  },
  watch: {
    num: {
      deep: true,
      immediate: true,
      handler(a, b) {
        return a;
      },
    },
  },
  methods: {
    add() {
      return this.num;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  text-align: center;

  font-size: 13px;
  .test {
    display: flex;
    div {
      width: 25%;
      text-align: center;
    }
  }
}
</style>